<template>
  <div class="app-container">
    <FilterSearch :value="queryParams" :config="configData" :labelCol="8" :wrapperCol="16" layout="inline">
    </FilterSearch>
    <main>
      <div class="table">
        <a-table :scroll="{ x: 1400 }" bordered :dataSource="tableData.dataSource" :columns="tableData.columns"
          :pagination="{ total: tableData.total, showTotal: total => ` 总条数:${total}条` }" :loading="tableData.loading">
          <template #bodyCell="{ column, index, record }">
            <template v-if="column.key === 'isNormal'">
              <template v-for="item in typeOptions.options1">
                <span v-if="record.isNormal == item.codeValue" color="#f50">{{ item.codeName }}</span>
              </template>
            </template>
            <template v-if="column.key === 'index'">
              <span>
                {{ (index + 1) }}
              </span>
            </template>
          </template>
        </a-table>
      </div>
      <div class="page">
        <a-pagination v-model:current="queryParams.pageNumber" :show-total="total => ` 总条数:${total}条`"
          v-model:pageSize="queryParams.pageSize" :total="tableData.total" @change="currentChange" />
      </div>
    </main>
    <div class="shade" v-show="spin">
      <a-spin size="large" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed, ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { user as useUser } from "@/store";
import { getTaskList, downloadTable, importExcel } from "@/api/commerProcess";
import { downloadFile } from '@/utils';
import { message } from 'ant-design-vue';
import { getQueryAll } from "@/api/common";
import { MATERIAL } from '@/utils/config';
import { getUserInfo } from '@/api/login';

const user = useUser();
const router = useRouter();
const spin = ref(false);
const queryParams = ref({
  pageNumber: 1,
  pageSize: 10,
  task: "",
  signer: "",
  createdTime: ""
});
const tableData = reactive({
  dataSource: [
    {
      id: 1,
      contractNum: "合同号",
      lesseeName: '胡彦斌',
      carNum: "车架号",
      warehouseTime: '2022/11/15 15:33:22',
      partNum: "件号",
      fileLocation: "档案存储地",
      caseNum: 1111,
      orderNum: "排序号",
      newFileLocation: "新档案存储地",
      newCaseNum: "新盒号",
      newOrderNum: "新排序号"
    },
    {
      id: 2,
      contractNum: "合同号",
      lesseeName: '胡彦斌',
      carNum: "车架号",
      warehouseTime: '2022/11/15 15:33:22',
      partNum: "件号",
      fileLocation: "档案存储地",
      caseNum: 1111,
      orderNum: "排序号",
      newFileLocation: "新档案存储地",
      newCaseNum: "新盒号",
      newOrderNum: "新排序号"
    },
    {
      id: 3,
      contractNum: "合同号",
      lesseeName: '胡彦斌',
      carNum: "车架号",
      warehouseTime: '2022/11/15 15:33:22',
      partNum: "件号",
      fileLocation: "档案存储地",
      caseNum: 1111,
      orderNum: "排序号",
      newFileLocation: "新档案存储地",
      newCaseNum: "新盒号",
      newOrderNum: "新排序号"
    },
  ],
  columns: [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      width: 80,
      align: 'center'
    },
    {
      title: '合同号',
      dataIndex: 'contractNum',
      key: 'contractNum',
    },
    {
      title: '承租人',
      dataIndex: 'lesseeName',
      key: 'lesseeName'
    },
    {
      title: '车架号',
      dataIndex: 'carNum',
      key: 'carNum'
    },
    {
      title: '入库时间',
      dataIndex: 'warehouseTime',
      key: 'warehouseTime',
    },
    {
      title: '件号',
      dataIndex: 'partNum',
      key: 'partNum',
    },
    {
      title: '档案存储地',
      dataIndex: 'fileLocation',
      key: 'fileLocation'
    },
    {
      title: '盒号',
      dataIndex: 'caseNum',
      key: 'caseNum'
    },
    {
      title: '排序号',
      dataIndex: 'orderNum',
      key: 'orderNum'
    },
    {
      title: '是否正常',
      dataIndex: 'isNormal',
      key: 'isNormal'
    }
  ],
  total: 0,
  loading: false
});

const configData = computed(() => {
  let config = {
    itemConfig: [
      {
        type: "input",
        prop: "task",
        allowClear: "关闭",
        label: "任务名称",
        placeholder: "请输入",
        disabled: true
      },
      {
        type: "input",
        prop: "signer",
        allowClear: "关闭",
        label: "创建人",
        placeholder: "请输入",
        disabled: true
      },
      {
        type: "input",
        prop: "createdTime",
        allowClear: "关闭",
        label: "创建时间",
        placeholder: "请输入",
        disabled: true
      },
    ],
    operate: [
      {
        icon: "",
        type: "primary",
        name: "导出",
        handleClick: exportData,
        rule: true,
      },
      {
        icon: "",
        type: "primary",
        name: "导入",
        handleClick: insertWorK,
        rule: true,
      }
    ],
    rules: {

    },
  };
  return config;
});
const typeOptions = reactive({
  options1: []
})

function getLoad() {
  if (Object.keys(user.$state.taskInfo).length <= 0) {
    router.push('/commeryear');
    return false;
  }
  tableData.loading = true;
  getTaskList({ taskId: user.$state.taskInfo.id, taskType: MATERIAL.YEARTASKTYPE }).then(async (res: any) => {
    tableData.dataSource = res.records;
    tableData.total = res.total;
    tableData.loading = false;
    queryParams.value = {
      ...user.$state.taskInfo,
      signer: await getUserInfo({ createGlobalUserId: user.$state.orderInfo.signer })
    };
  });
}
function exportData() {
  spin.value = true;
  downloadTable({ taskId: user.$state.taskInfo.id, taskType: MATERIAL.YEARTASKTYPE }).then((res: any) => {
    if (res) {
      downloadFile(res, "年盘任务档案.xlsx");
    }
    spin.value = false;
  })
}
function insertWorK() {
  let upload = document.createElement("input");
  upload.type = "file";
  upload.addEventListener("change", (e: any) => {
    if (e.target.files.length <= 0) return;
    let file = e.target.files[0];
    let formData = new FormData();
    formData.append("file", file);
    spin.value = true;
    importExcel(formData).then((res: any) => {
      if (res) {
        message.success('文件上传成功');
        getLoad();
      }
      spin.value = false;
    })
  });
  upload.click();
}
function currentChange(pageNumber: number, pageSize: number) {
  queryParams.value.pageNumber = pageNumber;
  queryParams.value.pageSize = pageSize;
  getLoad();
}
function getOptionsList() {
  getQueryAll({ codeType: 'normalType' }).then((res: any) => {
    typeOptions.options1 = res;
  });
}
getLoad();
getOptionsList();
</script>
<style lang="less" scoped></style>
